Chris Pollett > Old Classses >
CS174

( Print View )

Student Corner:
  [Grades Sec1]

  [Submit Sec1]

  [
Lecture Notes]
  [Discussion Board]

Course Info:
  [Texts & Links]
  [Description]
  [Course Outcomes]
  [Outcomes Matrix]
  [Course Schedule]
  [Grading]
  [Requirements/HW/Quizzes]
  [Class Protocols]
  [Exam Info]
  [Regrades]
  [University Policies]
  [Announcements]

HW Assignments:
  [Hw1]  [Hw2]  [Hw3]
  [Hw4]  [Hw5]  [Quizzes]

Practice Exams:
  [Midterm]  [Final]

                           












HW#4 --- last modified February 06 2019 04:12:19..

Solution set.

Due date: Apr 27

Files to be submitted:
  Hw4.zip

Purpose: To make use of a web service, to gain experience working with XML, JSON, JSONP.

Related Course Outcomes:

The main course outcomes covered by this assignment are:

LO2 -- Write schemas, DTDs, and style sheets for XML documents.

LO4 -- Write client-side scripts that validate HTML forms.

LO5 -- Develop and deploy web applications that involve components, web services, and databases.

Specification:

This homework consists of two parts: to create an xml dtd, trending.dtd, for trending news topics and to create a single page web app for trending news topics using a web service.

A trending topic consists of keywords, a frequency score, a query filter, and a url to news articles about this keyword. The meaning of a topic is that the keyword occurs frequency many times in recent news articles that contains the words in the query filter. For the first part of the homework, I would like you to create a DTD that models trending topics. Your DTD should have at least one entity: &CS; which abbreviate the query filter computer science. A topic is viewed as fading if the term hasn't been used in a news article in the last 48 hours. I want your dtd to have at least one attlist element which is used to model the fading property of a topic.

For the coding portion of the homework, you will create two programs: a web page trending.html, and a php program proxy.php. proxy.php just takes the query string that is passed to it, makes a curl request to the Yioop.com News Service with that query, and returns the results verbatim back to whoever made the request. The Yioop.com News Service can be used to output recent news items in a variety of formats. Besides a standard HTML output, this service can output news items in rss, json, or jsonp formats. The general format for querying the service for news in each of these formats is given by the urls below:

?f=rss&q=query+terms&limit=some_int_for_starting_doc&num=number_of_results_desired
?f=json&q=query+terms&limit=some_int_for_starting_doc&num=number_of_results_desired
?f=json&callback=myJavascriptFunction&q=query+terms&limit=some_int_for_starting_doc&num=number_of_results_desired

If the field q is omitted then the results come from all news articles that Yioop has downloaded in the last seven days. If limit is omitted, its values is taken to be zero, and if num is omitted its values is taken to be 20.

When a user goes to your trending.html, the web page should have at the top in an h1 tag Trending News. This should also be the title of the page. Beneath the h1 tag, there should be a text field labeled Keyword Filter. When trending.html finishes loading and every thirty seconds thereafter, it should using Javascript, check the windows location and see if it contains a proxy_format field. Your program should support one of two values for this variable rss or json. If proxy_format is not one of these two value, it defaults to rss. Using the proxy_format value as the value of f in the query string, trending.html should then use Javascript to make an XmlHttpRequest to proxy.php for the top 100 new stories containing the keywords listed in Keyword Filter text field. After retrieving these news items, using Javascript, it should determine the top 10 most frequently occurring words amongst all of these news articles. For each of these words it should also determine if it is fading in the sense mentioned above. Your program should then beneath the text field and in some div tag, list out in descending order of frequency each of the trending terms. Next to each terms it should draw a bar whose length represents the frequency of that term among the news items. This bar should be green if the term is not fading and red if it is fading. Finally, beneath these bars trending.html should output a textarea that contains an xml document that validates against trending.dtd with the information about the top 10 trending topics it has just determined.

Point Breakdown

trending.dtd is a valid DTD file according to Oxygen 1pt
trending.dtd have elements needed to specify a trending topic, has an attlist and has an entity as described (graded on 0 -too incomplete, 0.5 mainly there, 1 complete scale) 1pt
proxy.php script operates as described 1pt
trending.html validates as HTML 5 1pt
The look of the trending.html page is as described 1pt
trending.html detects onload events and has a 30 second timer each of which calls the same Javascript function (we'll call the timer callback). 1pt
timer callback looks at the window location has described before making a XmlHttpRequest (XHR) to proxy.php as described. The response to this request chould be handled by a function we'll call request callback. 1pt
request callback correctly computes top 10 trending words and correctly computes fading property. 1pt
request callback outputs trending words, their bars, and fading or not property to a div tag as described. 1pt
request callback outputs trending xml data to the text area as described. 1pt
Total10pts